import React from 'react';
import { Divider, Button, Icon } from 'antd';
import { connect } from 'dva';
import { Toolbar, withPropsAPI } from 'gg-editor';
import ToolbarButton from './ToolbarButton';
import ToolsaveButton from './ToolsaveButton';
import styles from './index.less';

const FlowToolbar = props => {
  return (
    <Toolbar className={styles.toolbar}>
      <ToolbarButton command="undo" text="撤销" />
      <ToolbarButton command="redo" text="恢复" />
      {props.operType !== 'view' ? <ToolbarButton command="clear" text="清空" /> : null}
      <Divider type="vertical" />
      {props.operType !== 'view' ? (
        <>
          <ToolbarButton command="copy" text="复制" />
          <ToolbarButton command="paste" text="粘贴" />
          <ToolbarButton command="delete" text="删除" />
          <Divider type="vertical" />
        </>
      ) : null}

      <ToolbarButton command="zoomIn" icon="zoom-in" text="放大" />
      <ToolbarButton command="zoomOut" icon="zoom-out" text="缩小" />
      <ToolbarButton command="autoZoom" icon="fit-map" text="适应尺寸" />
      <ToolbarButton command="resetZoom" icon="actual-size" text="正常尺寸" />
      {props.operType !== 'view' ? (
        <ToolbarButton command="multiSelect" icon="multi-select" text="多选" />
      ) : null}
      <Divider type="vertical" />
      {props.handleSave && props.operType !== 'view' ? (
        <ToolsaveButton
          icon="save"
          text="保存"
          handleSave={() => {
            const { propsAPI } = props;
            props.handleSave(propsAPI.save());
          }}
        />
      ) : (
        <a
          style={{ position: 'absolute', right: 68 }}
          onClick={() => {
            props.goToStep(3, { obj: props.obj });
          }}
        >
          文字模式
        </a>
      )}

      <span style={{ position: 'absolute', right: 8 }}>
        <Divider type="vertical" />
        <a
          type="primary"
          onClick={() => {
            props.goToStep(1);
          }}
        >
          <Icon type="rollback" />
          返回
        </a>
      </span>
    </Toolbar>
  );
};

export default connect(({ flowConfig }) => ({
  operType: flowConfig.operType,
}))(withPropsAPI(FlowToolbar));
